<template>
  <view class="cate">
    <navigator url="/pages/classify/index" class="cate__item">
      <text class="iconfont icon-fenlei" style="background: #ffc539"></text>
      <text>分类</text>
    </navigator>
    <navigator url="/pages/search/index" class="cate__item">
      <text class="iconfont icon-sousuo" style="background: #ff9654"></text>
      <text>搜索</text>
    </navigator>
    <navigator url="/sub-packages/account/index" class="cate__item">
      <text class="iconfont icon-chongzhi" style="background: #ff6687"></text>
      <text>账户</text>
    </navigator>
    <navigator url="/sub-packages/notice/index" class="cate__item">
      <text class="iconfont icon-xiaoxi" style="background: #6db3f7"></text>
      <text>消息</text>
    </navigator>
    <navigator class="cate__item" @click="openAttendance">
      <text class="iconfont icon-qiandao" style="background: #1bdb9f"></text>
      <text>签到</text>
    </navigator>
    <!-- 签到弹窗 -->
    <AttendanceDialog :show.sync="showAttendance" @close="closeAttendance" />
  </view>
</template>

<script>
import AttendanceDialog from "@/components/attendance-dialog";
import { mapGetters } from "vuex";

export default {
  components: {
    AttendanceDialog
  },
  
  data() {
    return {
      showAttendance: false
    };
  },

  computed: {
    ...mapGetters(["hasLogin"])
  },

  methods: {
    // 打开签到弹窗
    openAttendance() {
      if (this.hasLogin) {
        this.showAttendance = true;
      } else {
        uni.showToast({ title: '尚未登录，请先登录书城', icon: 'none' });
        setTimeout(() => {
          let redirect = '';
          if (this.$route && this.$route.fullPath) {
            redirect = encodeURIComponent(this.$route.fullPath);
          }
          uni.navigateTo({ url: `/pages/login/index${redirect ? `?redirect=${redirect}&type=navigateBack` : ''}` });
        }, 2000);
      }
    },

    // 关闭签到弹窗
    closeAttendance() {
      this.showAttendance = false;
    },

    showWaitToast() {
      uni.showToast({ icon: "none", title: "敬请期待~" })
    }
  }
};
</script>

<style lang="scss">
.cate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 30rpx 14rpx 0 14rpx;
  background: #fff;

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $font-sm + 2rpx;
    color: $font-color-dark;
    padding: 4rpx 12rpx;
  }

  .iconfont {
    width: 88rpx;
    height: 88rpx;
    margin-bottom: 14rpx;
    border-radius: 50%;
    opacity: 0.7;
    box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
    line-height: 88rpx;
    text-align: center;
    font-size: 48rpx;
    color: #fff;
  }
}

/* #ifdef MP */
.cate {
  position: relative;
  z-index: 5;
  border-radius: 16rpx 16rpx 0 0;
  margin-top: -20rpx;
}
/* #endif */
</style>
